import React, { Component } from 'react';
import {Card, Table, Badge,Divider, message} from 'antd';
import axios from './../../axios';
import './table.less';
class highTable extends Component {
    state = {
        loading: false,
        dataSource3:[],
        sortOrder: 'ascend'
    }
    params = {
        page: 1
    }
    componentWillMount() {
        const dataSource = [
            {
                id: '0',
                userName: 'jack',
                Sex: '1',
                State: '1',
                Hobby: '1',
                Birthday: '1994-04-14',
                Address: '河南省商丘市柘城县佰岗乡',
                Time: '07:20'
            },
            {
                id: '1',
                userName: 'Tom',
                Sex: '1',
                State: '1',
                Hobby: '1',
                Birthday: '1994-04-14',
                Address: '河南省商丘市',
                Time: '07:20'
            },
            {
                id: '3',
                userName: 'Lily',
                Sex: '1',
                State: '1',
                Hobby: '1',
                Birthday: '1994-04-14',
                Address: '河南省商丘市',
                Time: '07:20'
            }
        ]
        dataSource.map((item, index) => {
            return item.key = index;
        })
        this.request();
        this.request2();
        this.setState({
            dataSource
        })
    }
    // 动态获取表格数据
    request = () => {
        this.setState({loading: true})
        axios.Ajax({
            url: '/table/list2',
            method: 'get',
            data: {
                params: {
                    page: this.params.page
                },
                isShowLoading: false
            }
        }).then((res) => {
            res.result.list.map((item, index) => {
               return item.key = index;
            })
            this.setState({
                dataSource: res.result.list,
                loading: false
            })
        })
    }
    request2 = () => {
        axios.Ajax({
            url: '/table/list3',
            method: 'get',
            data: {
                params: {
                    page: 1
                },
                isShowLoading: true
            }
        }).then((res)=> {
            res.result.list.map((item,index) => {
                return item.key = index;
            })
            this.setState({
                dataSource3: res.result.list
            })
        })
    }
    // 分页、排序、筛选变化时触发
    handleChange = (pagination,filters, sorter) => {
        // console.log(pagination)
        // console.log(filters)
        // console.log(sorter)
        this.setState({
            sortOrder: sorter.order
        })
    }
    handleDelete = (record) => {
        message.info({
            title: '删除行信息',
            content: `你是否要删除${record.userName}`
        })
    }
    render() {
        const columns = [
            {
                title: 'id',    // 表头
                width: 80,
                dataIndex: 'id' // 字段属性名
            },
            {
                title: '用户名',
                width: 80,
                dataIndex: 'userName'
            },
            {
                title: '性别',
                width: 80,
                dataIndex: 'Sex',
                render(Sex) {
                    return Sex === 0 ? '男': '女'
                }
            },
            {
                title: '状态',
                width: 80,
                dataIndex: 'State',
                render(state) {
                    let config = {
                        '1' : '咸鱼一条',
                        '2' : '风华正茂',
                        '3' : '北大才子',
                        '4' : '百度F1',
                        '5' : '创业者',
                        '6' : '小白一枚'
                    }
                    return config[state]
                }
            },
            {
                title: '爱好',
                width: 80,
                dataIndex: 'Hobby',
                render(hobby) {
                    let config = {
                        '1':'写字',
                        '2':'游泳',
                        '3':'跑步',
                        '4':'打篮球',
                        '5':'画画',
                        '6':'唱歌',
                        '7':'骑行',
                        '8':'麦霸',
                        '9':'桌球'
                    };
                    return config[hobby]
                }
            },
            {
                title: '生日',
                width: 80,
                dataIndex: 'Birthday'
            },
            {
                title: '地址',
                width: 140,
                dataIndex: 'Address'
            },
            {
                title: '早起时间',
                width: 100,
                dataIndex: 'Time'
            },

        ];
        const columns2 = [
            {
                title: 'id',    // 表头
                width: 80,
                fixed: 'left',
                dataIndex: 'id' // 字段属性名
            },
            {
                title: '用户名',
                width: 80,
                fixed: 'left',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                width: 80,
                dataIndex: 'Sex',
                render(Sex) {
                    return Sex === 0 ? '男': '女'
                }
            },
            {
                title: '状态',
                width: 80,
                dataIndex: 'State',
                render(state) {
                    let config = {
                        '1' : '咸鱼一条',
                        '2' : '风华正茂',
                        '3' : '北大才子',
                        '4' : '百度F1',
                        '5' : '创业者',
                        '6' : '小白一枚'
                    }
                    return config[state]
                }
            },
            {
                title: '爱好',
                width: 80,
                dataIndex: 'Hobby',
                render(hobby) {
                    let config = {
                        '1':'写字',
                        '2':'游泳',
                        '3':'跑步',
                        '4':'打篮球',
                        '5':'画画',
                        '6':'唱歌',
                        '7':'骑行',
                        '8':'麦霸',
                        '9':'桌球'
                    };
                    return config[hobby]
                }
            },
            {
                title: '生日',
                width: 80,
                dataIndex: 'Birthday'
            },
            {
                title: '地址',
                width: 140,
                dataIndex: 'Address'
            },
            {
                title: '早起时间',
                width: 100,
                fixed: 'right',
                dataIndex: 'Time'
            },

        ];
        const columns3 = [
            {
                title: 'id',    // 表头
                dataIndex: 'id' // 字段属性名
            },
            {
                title: '用户名',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                dataIndex: 'Sex',
                render(Sex) {
                    return Sex === 0 ? '男': '女'
                }
            },
            {
                title: '年龄',
                dataIndex: 'Age',
                sorter: (a, b) => {
                    return a.Age-b.Age
                },
                sortOrder: this.state.sortOrder
            },
            {
                title: '状态',
                dataIndex: 'State',
                render(state) {
                    let config = {
                        '1' : '咸鱼一条',
                        '2' : '风华正茂',
                        '3' : '北大才子',
                        '4' : '百度F1',
                        '5' : '创业者',
                        '6' : '小白一枚'
                    }
                    return config[state]
                }
            },
            {
                title: '爱好',
                dataIndex: 'Hobby',
                render(hobby) {
                    let config = {
                        '1':'写字',
                        '2':'游泳',
                        '3':'跑步',
                        '4':'打篮球',
                        '5':'画画',
                        '6':'唱歌',
                        '7':'骑行',
                        '8':'麦霸',
                        '9':'桌球'
                    };
                    return config[hobby]
                }
            },
            {
                title: '生日',
                dataIndex: 'Birthday'
            },
            {
                title: '地址',
                dataIndex: 'Address'
            },
            {
                title: '早起时间',
                dataIndex: 'Time'
            },

        ]
        const columns4 = [
            {
                title: 'id',    // 表头
                dataIndex: 'id' // 字段属性名
            },
            {
                title: '用户名',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                dataIndex: 'Sex',
                render(Sex) {
                    return Sex === 0 ? '男': '女'
                }
            },
            {
                title: '年龄',
                dataIndex: 'Age',
                sorter: (a, b) => {
                    return a.Age-b.Age
                },
                sortOrder: this.state.sortOrder
            },
            {
                title: '状态',
                dataIndex: 'State',
                render(state) {
                    let config = {
                        '1' : <Badge status="success" text="咸鱼一条"/>,
                        '2' : <Badge status="error" text="风华正茂"/>,
                        '3' : <Badge status="default" text="北大才子"/>,
                        '4' : <Badge status="processing" text="百度F1"/>,
                        '5' : <Badge status="warning" text="创业者"/>,
                        '6' : <Badge status="warning" text="小白一枚"/>
                    }
                    return config[state]
                }
            },
            {
                title: '爱好',
                dataIndex: 'Hobby',
                render(hobby) {
                    let config = {
                        '1':'写字',
                        '2':'游泳',
                        '3':'跑步',
                        '4':'打篮球',
                        '5':'画画',
                        '6':'唱歌',
                        '7':'骑行',
                        '8':'麦霸',
                        '9':'桌球'
                    };
                    return config[hobby]
                }
            },
            {
                title: '生日',
                dataIndex: 'Birthday'
            },
            {
                title: '地址',
                dataIndex: 'Address'
            },
            {
                title: '早起时间',
                dataIndex: 'Time'
            },
            {
                title: '操作',
                render: (text, record,index) => {
                    return
                    <span>
                        <a href="javascript:;" onClick={(record)=> {this.handleDelete(record)}}>删除</a>
                        <Divider type="vertical"/>
                        <a href="javascript:;">查询</a>
                    </span>
                }
            }

        ]
        return (
            <div>
                <Card title="固定表格">
                    <div>
                        <p>设置每个colums的width属性的值，并且指定scroll中y的值</p>
                    </div>
                    <Table 
                        dataSource={this.state.dataSource}
                        columns={columns}
                        scroll={{y: 240}}/>
                </Card>
                <Card title="左侧固定">
                    <div>
                        <p>当列有很多的时候，设置scroll中x的值为每个colums中width的值的总和多十几像素,需要固定的列指定colums中的fixed: 'left|right'</p>
                    </div>
                    <Table 
                        dataSource={this.state.dataSource} 
                        columns={columns2}
                        pagination={false}
                        loading={this.state.loading}
                        scroll={{x: 1300}}/>
                </Card>
                <Card title="排序">
                    <div>
                        <p>当需要给某列设置为排序时，需要在它的colums中添加sorter方法(和Array.sort用法类似)，还要指定sorterOrder控制升序还是降序，动态变化需要监听table的onChange事件改变</p>
                    </div>
                    <Table 
                        dataSource={this.state.dataSource3} 
                        columns={columns3}
                        pagination={false}
                        onChange={this.handleChange}/>
                </Card>
                <Card title="操作按钮">
                    <div>
                        <p>当需要给某列设置为排序时，需要在它的colums中添加sorter方法(和Array.sort用法类似)，还要指定sorterOrder控制升序还是降序，动态变化需要监听table的onChange事件改变</p>
                    </div>
                    <Table 
                        dataSource={this.state.dataSource3} 
                        columns={columns4}
                        pagination={false}
                        onChange={this.handleChange}/>
                </Card>
            </div>
        );
    }
}

export default highTable;